
<template>
  <div class="home">
    <h2>当前计数:{{ $store.state.counter }}</h2>
    <h2>当前名称:{{ $store.state.name }}</h2>
    <button @click="incrementAction">发起action</button>
    <button @click="changeNameAction('090')">发起action修改name</button>
  </div>
</template>
<script>

import { mapActions } from "vuex";
export default {
  computed:{

  },
  methods:{
    // actionBtnClick(){
    //   this.$store.dispatch("incrementAction")
    // },
    // nameBtnClick(){
    //   this.$store.dispatch("changeNameAction","涨水")
    // },
    ...mapActions(["incrementAction","changeNameAction"])
  }
}
</script>

<script setup>

 import { mapMutations, useStore } from 'vuex';
 const store = useStore()
//  1.对象遍历,绑定this
const actions = mapActions(["incrementAction","changeNameAction"])
const newAction = {}
Object.keys(actions).forEach(key =>{
  newAction[key] = actions[key].bind({$store: store})
})
const { incrementAction,changeNameAction } = newAction

// 2. 
  function fnc(){
    store.dispatch('incrementAction')
  }
</script>
